<template>
  <table @click="handleMonthTableClick" class="month-table">
    <tbody>
      <tr>
        <td :class="getCellStyle(0)">
          <a class="cell">{{ getLocale('datePicker.months.jan') }}</a>
        </td>
        <td :class="getCellStyle(1)">
          <a class="cell">{{ getLocale('datePicker.months.feb') }}</a>
        </td>
        <td :class="getCellStyle(2)">
          <a class="cell">{{ getLocale('datePicker.months.mar') }}</a>
        </td>
        <td :class="getCellStyle(3)">
          <a class="cell">{{ getLocale('datePicker.months.apr') }}</a>
        </td>
      </tr>
      <tr>
        <td :class="getCellStyle(4)">
          <a class="cell">{{ getLocale('datePicker.months.may') }}</a>
        </td>
        <td :class="getCellStyle(5)">
          <a class="cell">{{ getLocale('datePicker.months.jun') }}</a>
        </td>
        <td :class="getCellStyle(6)">
          <a class="cell">{{ getLocale('datePicker.months.jul') }}</a>
        </td>
        <td :class="getCellStyle(7)">
          <a class="cell">{{ getLocale('datePicker.months.aug') }}</a>
        </td>
      </tr>
      <tr>
        <td :class="getCellStyle(8)">
          <a class="cell">{{ getLocale('datePicker.months.sep') }}</a>
        </td>
        <td :class="getCellStyle(9)">
          <a class="cell">{{ getLocale('datePicker.months.oct') }}</a>
        </td>
        <td :class="getCellStyle(10)">
          <a class="cell">{{ getLocale('datePicker.months.nov') }}</a>
        </td>
        <td :class="getCellStyle(11)">
          <a class="cell">{{ getLocale('datePicker.months.dec') }}</a>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script type="text/babel">
  import {DomUtils} from '../utils'
  import LOCALES from '../../../locales'

  export default {
    props: {
      disabledDate: {},
      date: {},
      month: {
        type: Number
      }
    },
    methods: {

      getLocale: LOCALES.GetLocale,

      getCellStyle (month) {
        const style = {}
        const date = new Date(this.date)

        date.setMonth(month)
        style.disabled = typeof this.disabledDate === 'function' &&
          this.disabledDate(date)
        style.current = this.month === month

        return style
      },

      handleMonthTableClick (event) {
        const target = event.target
        if (target.tagName !== 'A') return
        if (DomUtils.hasClass(target.parentNode, 'disabled')) return
        const column = target.parentNode.cellIndex
        const row = target.parentNode.parentNode.rowIndex
        const month = row * 4 + column

        this.$emit('pick', month)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "./../css/variables";

  .month-table {
    font-size: 12px;
    margin: -1px;
    border-collapse: collapse;

    td {
      text-align: center;
      padding: 20px 3px;
      cursor: pointer;

      &.disabled .cell {
        background-color: #f4f4f4;
        cursor: not-allowed;
        color: #ccc;
      }

      &.disabled .cell:hover{
        text-decoration: none;
      }

      .cell {
        width: 48px;
        height: 32px;
        display: block;
        line-height: 32px;
        color: $datePicker-color;
      }

      &:not(.disabled) .cell:hover{
        background-color: $datePicker-cell-hover-color;
        text-decoration: none;
      }

      &.current:not(.disabled) .cell {
        background-color: $datePicker-active-color !important;
        color: #fff;
      }
    }
  }
</style>
